

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="https://img.mkerosene.cn/touxiang.jpg">
  <link rel="icon" href="https://img.mkerosene.cn/touxiang.jpg">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="Kerosene W">
  <meta name="keywords" content="">
  
    <meta name="description" content="为简单了解、学习html、css、JavaScript三剑客，写了一个“极简主义”，绝对够简易，来吧，先展示！  源码如下：  Html：  12345678910111213141516171819202122232425262728293031323334353637383940&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;meta">
<meta property="og:type" content="article">
<meta property="og:title" content="简易邮箱登录界面(HTML、CSS、JS)">
<meta property="og:url" content="http://example.com/2020/11/25/%E7%AE%80%E6%98%93%E9%82%AE%E7%AE%B1%E7%99%BB%E5%BD%95%E7%95%8C%E9%9D%A2(HTML%E3%80%81CSS%E3%80%81JS)/index.html">
<meta property="og:site_name" content="追求源于热爱">
<meta property="og:description" content="为简单了解、学习html、css、JavaScript三剑客，写了一个“极简主义”，绝对够简易，来吧，先展示！  源码如下：  Html：  12345678910111213141516171819202122232425262728293031323334353637383940&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;meta">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://img.mkerosene.cn/hcj.png">
<meta property="article:published_time" content="2020-11-25T15:23:06.000Z">
<meta property="article:modified_time" content="2021-10-14T15:52:55.671Z">
<meta property="article:author" content="Kerosene W">
<meta property="article:tag" content="Web">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://img.mkerosene.cn/hcj.png">
  
  
  <title>简易邮箱登录界面(HTML、CSS、JS) - 追求源于热爱</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4/github-markdown.min.css" />
  <link  rel="stylesheet" href="/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.css" />
  


<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"example.com","root":"/","version":"1.8.13","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":"❡"},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"https://img.mkerosene.cn/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":true,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":"FI1uAFAYz0Q3MPDiORqd0JAN-gzGzoHsz","app_key":"EhKAjMe3bmq0WLTSgktGg2OC","server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
</head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/">
      <strong>mKerosene</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/links/">
                <i class="iconfont icon-link-fill"></i>
                友链
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
            </a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('https://img.mkerosene.cn/default.png') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="Knowledge of HTML, CSS and JS...">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2020-11-25 23:23" pubdate>
        2020年11月25日 晚上
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      3.8k 字
    </span>
  

  
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      12 分钟
    </span>
  

  
  
    
      <!-- LeanCloud 统计文章PV -->
      <span id="leancloud-page-views-container" class="post-meta" style="display: none">
        <i class="iconfont icon-eye" aria-hidden="true"></i>
        <span id="leancloud-page-views"></span> 次
      </span>
    
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">Knowledge of HTML, CSS and JS...</h1>
            
              <p class="note note-info">
                
                  本文最后更新于：1 年前
                
              </p>
            
            <div class="markdown-body">
              <h3 id="为简单了解、学习html、css、JavaScript三剑客，写了一个“极简主义”，绝对够简易，来吧，先展示！"><a href="#为简单了解、学习html、css、JavaScript三剑客，写了一个“极简主义”，绝对够简易，来吧，先展示！" class="headerlink" title="为简单了解、学习html、css、JavaScript三剑客，写了一个“极简主义”，绝对够简易，来吧，先展示！"></a>为简单了解、学习html、css、JavaScript三剑客，写了一个“极简主义”，绝对够简易，来吧，先展示！</h3><p><a target="_blank" rel="noopener" href="https://imgchr.com/i/DXASuF"><img src="https://s3.ax1x.com/2020/12/06/DXASuF.md.png" srcset="https://img.mkerosene.cn/loading.gif" lazyload alt="DXASuF.md.png"></a></p>
<hr>
<p>源码如下：</p>
<ul>
<li>Html：</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>QQ邮箱登录<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">    	<span class="hljs-selector-tag">img</span> &#123;</span><br><span class="css">    		<span class="hljs-attribute">position</span>: absolute;</span><br><span class="css">    		<span class="hljs-attribute">margin-left</span>: <span class="hljs-number">35%</span>;</span><br><span class="css">    	&#125;</span><br><span class="css">    	<span class="hljs-selector-tag">form</span>&#123;</span><br><span class="css">    		<span class="hljs-attribute">margin-left</span>: <span class="hljs-number">10%</span>;</span><br><span class="css">    		<span class="hljs-attribute">margin-top</span>: <span class="hljs-number">10%</span>;</span><br><span class="css">    	&#125;</span><br><span class="css">    	<span class="hljs-selector-tag">button</span> &#123;</span><br><span class="css">    		<span class="hljs-attribute">margin-left</span>: <span class="hljs-number">4%</span>;</span><br><span class="css">    	&#125;</span><br><span class="css">    	<span class="hljs-selector-tag">a</span>&#123;</span><br><span class="css">    		<span class="hljs-attribute">margin-left</span>: <span class="hljs-number">10%</span>;</span><br><span class="css">    	&#125;</span><br><span class="css"></span><br><span class="css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;js/inter.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;imgs/QQ截图20201125150933.png&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;登录配置图片&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;demo/welcome.php&quot;</span> <span class="hljs-attr">method</span>=<span class="hljs-string">&quot;post&quot;</span>&gt;</span><br>        账号：<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;account&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;支持QQ号/邮箱/手机号登录&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>        密码：<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;password&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;passwd&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;QQ密码&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn btn-primary&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;fnLogin()&quot;</span>&gt;</span>登录<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;cancel&quot;</span>&gt;</span>取消<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;error_box&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://mail.qq.com/?ocid=MSNCNLG10-2/&quot;</span>&gt;</span>官方入口!!!<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<ul>
<li>js:</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fnLogin</span>(<span class="hljs-params"></span>) </span>&#123;<br> <span class="hljs-keyword">var</span> oUacnt = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&quot;account&quot;</span>)<br> <span class="hljs-keyword">var</span> oUpswd = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&quot;passwd&quot;</span>)<br> <span class="hljs-keyword">var</span> oError = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&quot;error_box&quot;</span>)<br> <span class="hljs-keyword">var</span> isError = <span class="hljs-literal">true</span>;<br> <span class="hljs-keyword">if</span> (oUacnt.value.length &gt; <span class="hljs-number">20</span> || oUacnt.value.length &lt; <span class="hljs-number">5</span>) &#123;<br>  oError.innerHTML = <span class="hljs-string">&quot;请输入正确账号&quot;</span>;<br>  isError = <span class="hljs-literal">false</span>;<br>  <span class="hljs-keyword">return</span>;<br> &#125;<br> <span class="hljs-keyword">if</span> (oUpswd.value.length &gt; <span class="hljs-number">18</span> || oUpswd.value.length &lt; <span class="hljs-number">6</span>) &#123;<br>  oError.innerHTML = <span class="hljs-string">&quot;密码请输入6-18位字符&quot;</span><br>  isError = <span class="hljs-literal">false</span>;<br>  <span class="hljs-keyword">return</span>;<br> &#125;<br> <span class="hljs-built_in">window</span>.alert(<span class="hljs-string">&quot;呵*_*,,,任务完成。。。&quot;</span>)<br>&#125;<br><span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&#x27;html&#x27;</span>).onclick= <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>    alert(<span class="hljs-string">&#x27;啊就这...&#x27;</span>);<br> &#125;<br><br></code></pre></td></tr></table></figure>

<hr>
<h3 id="记个笔记"><a href="#记个笔记" class="headerlink" title="记个笔记"></a>记个笔记</h3><h4 id="Html"><a href="#Html" class="headerlink" title="Html"></a>Html</h4><ol>
<li>H5时代开头简洁明了</li>
</ol>
<p><code>&lt;!DOCTYPE html&gt;</code></p>
<ol start="2">
<li>基本结构</li>
</ol>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs xml"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<ul>
<li>一个人完整元素=开始标签<code>&lt;p&gt;</code>+内容+结束标签<code>&lt;/p&gt;</code></li>
<li>注意所有符号使用英文</li>
<li>标签属性添加至开始标签末尾<code>&gt;</code>前 &lt;元素 属性=””&gt;内容&lt;/元素&gt;       </li>
<li> 元素与属性间，属性与属性间必须有一个括号</li>
<li>Sublime Text中敲出<code>&lt;h</code>选中html即可直接给出结构</li>
</ul>
<ol start="3">
<li><code>meta</code>标签+<code>charset</code>属性，指定 HTML 文档的编码</li>
</ol>
<p><code>&lt;meta charset=&quot;UTF-8&quot;&gt;</code></p>
<ul>
<li>网页尺寸实现自适应</li>
</ul>
<p><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</code></p>
<ol start="4">
<li><code>img</code>标签 ：</li>
</ol>
<p><code>&lt;img src=&quot;imgs/QQ截图20201125150933.png&quot; alt=&quot;登录配置图片&quot;&gt;</code></p>
<ul>
<li>属性src的值为图片路径，alt指文本信息</li>
<li>另外还有width、height属性来设置图片宽度和高度（单位px或%）</li>
</ul>
<ol start="5">
<li><code>br</code>换行</li>
<li><code>input</code>标签：</li>
</ol>
<p>用于搜集用户信息，即为输入</p>
<ul>
<li>type属性规定元素类型，例如<code>type=&quot;passwd&quot;</code>即可实现密码隐藏的效果</li>
<li>placeholder属性表示占据文本，值为text</li>
</ul>
<ol start="7">
<li><code>button</code>标签：</li>
</ol>
<p>可点击按钮</p>
<ul>
<li>按钮名称放于两尖括号之间</li>
<li>记得为其指定type属性（button、reset、submit）</li>
</ul>
<ol start="8">
<li><code>a</code>标签：</li>
</ol>
<p>超链接</p>
<ul>
<li>href属性的值为链接URL，两对尖括号间添加可点击文字</li>
<li>target属性指定在何处打开超链接</li>
<li><ul>
<li>_blank：在新窗口中打开</li>
<li>_parent：在当前的父窗口中打开，如果不存在父窗口，此选项的行为方式与 _self 等同</li>
<li>_self：当前窗口打开（默认）</li>
<li>_top：在整个窗口中打开</li>
<li>framename：在指定的框架中打开</li>
</ul>
</li>
</ul>
<h4 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h4><ol>
<li>选择器{属性:属性的值;}</li>
</ol>
<p>选择器指HTML元素的名称</p>
<ol start="2">
<li><p>常见属性:</p>
<p>背景</p>
<p><a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/background-color.html">background-color</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/background-image.html">background-image</a></p>
<p><a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/background-origin.html">background-origin</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/background-position.html">background-position</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/background-repeat.html">background-repeat</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/background-size.html">background-size</a></p>
<h4 id="位置"><a href="#位置" class="headerlink" title="位置"></a>位置</h4><p><a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/clear.html">clear</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/clip.html">clip</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/cursor.html">cursor</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/display.html">display</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/float.html">float</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/top.html">top</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/right.html">right</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/bottom.html">bottom</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/left.html">left</a></p>
<p><a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/overflow.html">overflow</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/position.html">position</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/visibility.html">visibility</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/z-index.html">z-index</a></p>
<h4 id="外边距"><a href="#外边距" class="headerlink" title="外边距"></a>外边距</h4><p><a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/margin-top.html">margin-top</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/margin-right.html">margin-right</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/margin-bottom.html">margin-bottom</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/margin-left.html">margin-left</a></p>
<h4 id="内边距"><a href="#内边距" class="headerlink" title="内边距"></a>内边距</h4><p><a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/padding-top.html">padding-top</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/padding-right.html">padding-right</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/padding-bottom.html">padding-bottom</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/padding-left.html">padding-left</a></p>
<h4 id="尺寸"><a href="#尺寸" class="headerlink" title="尺寸"></a>尺寸</h4><p><a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/height.html">height</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/width.html">width</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/max-height.html">max-height</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/max-width.html">max-width</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/min-height.html">min-height</a>、<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/pageCSS3/min-width.html">min-width</a></p>
</li>
<li><p>同一选择器中多个属性用;隔开</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-tag">p</span>&#123;<br>​	<span class="hljs-attribute">color</span>: red;<br><br>​	<span class="hljs-attribute">width</span>: <span class="hljs-number">500px</span>;<br>&#125;<br></code></pre></td></tr></table></figure>



<p>相同选择器使用同一属性用，隔开</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-tag">p</span>,<span class="hljs-selector-tag">h1</span>&#123;<br>	<span class="hljs-attribute">color</span>: red;<br><br>	<span class="hljs-attribute">width</span>: <span class="hljs-number">500px</span>;<br>&#125;<br></code></pre></td></tr></table></figure></li>
</ol>
<h4 id="JS"><a href="#JS" class="headerlink" title="JS"></a>JS</h4><p>1.基本结构</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript"><span class="hljs-attr">alert</span>:(<span class="hljs-string">&#x27;hello world&#x27;</span>)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>2.声明变量</p>
<figure class="highlight nix"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs nix"><span class="hljs-keyword">let</span> <span class="hljs-attr">a</span> = <span class="hljs-number">1</span><br></code></pre></td></tr></table></figure>
<p>或者使用var<br>3.JS对大小写敏感<br>4.数据类型<br><a target="_blank" rel="noopener" href="https://imgchr.com/i/DXkvcT"><img src="https://s3.ax1x.com/2020/12/06/DXkvcT.md.png" srcset="https://img.mkerosene.cn/loading.gif" lazyload alt="DXkvcT.md.png"></a></p>
<p>5.常用运算符</p>
<p><a target="_blank" rel="noopener" href="https://imgchr.com/i/DXkj3V"><img src="https://s3.ax1x.com/2020/12/06/DXkj3V.md.png" srcset="https://img.mkerosene.cn/loading.gif" lazyload alt="DXkj3V.md.png"></a></p>
<p>6.简单的点击交互</p>
<p><code>document.querySelector(&#39;html&#39;).onclick= function() &#123;     alert(&#39;啊就这...&#39;);</code></p>
<ul>
<li>使用函数alert( )可在浏览器窗口内弹出<strong>警告框</strong></li>
<li>本例使用匿名函数赋值给标签<code>&lt;html&gt;</code>的onclick属性</li>
</ul>
<p>7.js中条件语句与C类似</p>
<hr>
<p>简单的就这些，感谢阅读😎</p>
<p>参考教程&lt;<a target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV1QW411N762?p=1">【Web前端开发】《零基础入门学习Web开发》（HTML5&amp;CSS3）（小甲鱼）_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</a>&gt;</p>
<p>​                &lt;<a target="_blank" rel="noopener" href="https://man.ilovefishc.com/">鱼C-Web-速查宝典 (ilovefishc.com)</a>&gt;</p>
<p>​                &lt;<a target="_blank" rel="noopener" href="https://www.w3cschool.cn/minicourse/play/wsfnp">Web入门微课_编程实战微课_w3cschool</a>&gt;</p>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/note/">note</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/Web/">Web</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2020/12/25/BUUCTF-wp/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">BUUCTF wp(持续更新中)</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2020/11/01/Bugku%E9%9D%B6%E5%9C%BAwp/">
                        <span class="hidden-mobile">BugKu-wp(持续更新中)</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
              <!-- Comments -->
              <article class="comments" id="comments" lazyload>
                
                  
                
                
  <div id="twikoo"></div>
  <script type="text/javascript">
    Fluid.utils.loadComments('#comments', function() {
      Fluid.utils.createScript('https://cdn.jsdelivr.net/npm/twikoo@1/dist/twikoo.all.min.js', function() {
        var options = Object.assign(
          {"envId":"blog-3gentarg3e6a1b5e","region":"ap-shanghai","path":"window.location.pathname"},
          {
            el: '#twikoo',
            path: 'window.location.pathname',
            onCommentLoaded: function() {
              Fluid.plugins.initFancyBox('#twikoo .tk-content img:not(.tk-owo-emotion)');
            }
          }
        )
        twikoo.init(options)
      });
    });
  </script>
  <noscript>Please enable JavaScript to view the comments</noscript>


              </article>
            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <div class="copyright">&copy;2020 - 2021 By Kerosene.W</div> <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
  </div>
  
  <div class="statistics">
    
    

    
      
        <!-- LeanCloud 统计PV -->
        <span id="leancloud-site-pv-container" style="display: none">
            总访问量 
            <span id="leancloud-site-pv"></span>
             次
          </span>
      
      
        <!-- LeanCloud 统计UV -->
        <span id="leancloud-site-uv-container" style="display: none">
            总访客数 
            <span id="leancloud-site-uv"></span>
             人
          </span>
      

    
  </div>


  

  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.min.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  <script  src="/js/local-search.js" ></script>



  
    <script  src="/js/img-lazyload.js" ></script>
  



  



  
    <script  src="https://cdn.jsdelivr.net/npm/tocbot@4/dist/tocbot.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4/anchor.min.js" ></script>
  
  
    <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js" ></script>
  




  <script defer src="/js/leancloud.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
        typing(title);
      
    })(window, document);
  </script>












  

  

  

  

  

  





<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>


</body>
</html>
